<template>
  <div>
    <div class="main">
      <!-- 酒店头部导航 -->
      <hotelhead></hotelhead>
      <div class="detail-img">
        <h3>{{ detailsList.title }}</h3>
        <p class="lable">{{ detailsList.lable }}</p>
        <p class="lable">{{ detailsList.address }}</p>
        <div class="numevanum">
          <p class="num">{{ detailsList.num }}</p>
          <p class="evanum">{{ detailsList.evanum }}</p>
          <span :class="{ active: activefase == true }" @click="collect"
            ><i class="el-icon-star-off"></i>收藏</span
          >
        </div>
        <div class="imglist">
          <el-row>
            <el-col :span="16">
              <img
                class="imgleft"
                :src="detailsList.image"
                @click="bigimg(detailsList.image)"
              />
            </el-col>
            <el-col :span="8">
              <img
                class="img"
                :src="item.picture"
                v-for="item in imglist"
                :key="item.id"
                alt=""
                @click="bigimg(item.picture)"
              />
            </el-col>
          </el-row>
        </div>
        <!-- 搜索价格 -->
        <inputsearch></inputsearch>
        <!-- 价格 -->

        <!-- 地图 -->
        <div class="detail-dt">
          <across></across>
        </div>
        <!-- 基本信息 -->
        <hotelBase></hotelBase>
        <!-- 用户评价 -->
        <hotelJudge></hotelJudge>
        <!-- 周边酒店推荐 -->
        <h2 class="zbjd">周边酒店推荐</h2>
        <special></special>
      </div>
    </div>
    <!-- 图片蒙版 -->
    <div class="imgmb" id="bigimage">
      <img :src="imgurl" alt="" />
      <i class="el-icon-error" @click="close"></i>
    </div>
  </div>
</template>

<script>
import hotelhead from "./hotelhead.vue";
import special from "./SpecialHote.vue";
import inputsearch from "./searchinput.vue";
import across from "./across.vue";
import hotelBase from "./hotelDetailBase.vue";
import hotelJudge from "./hotelDetailJudge.vue";
import sessionLogin from "../../http/session";
export default {
  data() {
    return {
      detailsList: [],
      id: 1,
      imglist: [],
      imgurl: "", //大图
      activefase: false,
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    // console.log(this.$route.params);
    this.details();
  },
  methods: {
    // 收藏
    collect() {
      if (sessionStorage.getItem("cookie-session")) {
        sessionLogin().then((res) => {
          let uname = res.data.data[0].uname;
          // console.log(uname);
          if (uname) {
            if (this.activefase == true) {
              this.$http
                .post("/UnhotelCollect", {
                  id: this.detailsList.id,
                })
                .then((res) => {
                  // console.log(res);
                  if (res.data.coded == 200) {
                    this.$message({
                      type: "success",
                      message: `取消收藏成功`,
                    });
                  }
                });
              this.activefase = false;
            } else {
              // console.log(this.detailsList.mid);

              this.$http
                .post("/hotelCollect", {
                  username: uname,
                  mid: this.detailsList.mid,
                  image: this.detailsList.image,
                  title: this.detailsList.title,
                  address: this.detailsList.address,
                })
                .then((res) => {
                  if (res.data.coded == 200) {
                    this.$message({
                      type: "success",
                      message: `收藏成功`,
                    });
                    this.activefase = true;
                  }
                });
            }
          }
        });
      } else {
        this.$message({
          type: "error",
          message: ` 请先登录`,
        });
      }
    },
    details() {
      this.$http
        .get("/hotelHomeDetail", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          // console.log(res.data);
          this.detailsList = res.data.data[0];
          this.imglist = res.data.picture;
          // console.log(this.imglist);
        });
    },
    // 图片放大
    bigimg(url) {
      // console.log(url);
      bigimage.style.display = "block";
      this.imgurl = url;
    },
    close() {
      bigimage.style.display = "none";
    },
  },
  components: {
    hotelhead,
    special,
    inputsearch,
    across,
    hotelBase,
    hotelJudge,
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 1200px;
  margin: 0 auto;
}
.imgmb {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  padding: 20px;
  text-align: center;
  i {
    position: absolute;
    top: 20px;
    right: 316px;
    color: #fff;
    font-size: 50px;
  }
  img {
    width: 1100px;
    height: 800px;
    border-radius: 5px;
  }
}
.detail-img {
  margin: 20px 0;
  position: relative;
  .lable {
    font-size: 14px;
    color: #666;
    padding: 5px 0;
  }
  .numevanum {
    position: absolute;
    top: 20px;
    right: 10px;
    display: flex;
    .num {
      width: 60px;
      font-size: 18px;
      color: #66b1ff;
      border-right: 1px solid #ccc;
    }
    .evanum {
      color: #333;
      width: 56px;
      padding: 0 10px;
      font-size: 14px;
      border-right: 1px solid #ccc;
    }
    span {
      padding-left: 10px;
    }
    .active {
      color: #409eff;
    }
  }
  .imglist {
    .imgleft {
      width: 100%;
      height: 484px;
      border-radius: 5px;
    }
    .img {
      width: 190px;
      height: 155px;
      margin-left: 10px;
      margin-bottom: 5px;
      border-radius: 5px;
    }
  }
}
// 地图
.zbjd {
  text-align: center;
  margin-top: 40px;
}
</style>

